<template>
  <view class="container">
    <view class="contact-info">
      <view class="info-item">
        <view class="info-icon">
          <image src="/static/contact/wechat.png"></image>
        </view>
        <view class="info-content">
          <view class="info-title">微信号</view>
          <view class="info-value" @click="copyWechat">HB_Mr_Liang</view>
        </view>
      </view>
      <view class="info-item">
        <view class="info-icon">
          <image src="/static/contact/phone.png"></image>
        </view>
        <view class="info-content">
          <view class="info-title">电话</view>
          <view class="info-value">18903100844</view>
        </view>
      </view>
      <view class="info-item">
        <view class="info-icon">
          <image src="/static/contact/email.jpeg"></image>
        </view>
        <view class="info-content">
          <view class="info-title">邮箱</view>
          <view class="info-value">18903100844@189.cn</view>
        </view>
      </view>
      <view class="info-item">
        <view class="info-icon">
          <image src="/static/contact/website.jpeg"></image>
        </view>
        <view class="info-content">
          <view class="info-title">网站</view>
          <view class="info-value">www.take01.top</view>
        </view>
      </view>
    </view>

    <view class="qr-code">
      <image src="/static/contact/qrcode.jpg" @click="previewQrCode" mode="aspectFit"></image>
      <view class="qr-text">扫码关注公众号</view>
    </view>


<!--    <view class="contact-form">
      <view class="form-title">发送消息</view>
      <input class="form-input" placeholder="您的姓名" v-model="name" />
      <input class="form-input" placeholder="您的联系方式" v-model="contact" />
      <textarea class="form-textarea" placeholder="请输入您的需求" v-model="message"></textarea>
      <button class="submit-button" @click="submitForm">提交</button>
    </view> -->


  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      contact: '',
      message: '',
      qrCodeUrl: '/static/contact/qrcode.jpg'
    }
  },
  onLoad() {

  },
  methods: {
    submitForm() {
      if (!this.name || !this.contact || !this.message) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }

      // 这里可以添加表单提交逻辑
      uni.showModal({
        title: '提示',
        content: '功能还未实现,请直接通过微信联系',
        showCancel: false,
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            // 重置表单
            this.name = ''
            this.contact = ''
            this.message = ''
          }
        }
      })
    },
    previewQrCode() {
      uni.previewImage({
        urls: [this.qrCodeUrl],
        current: 0
      })
    },
    copyWechat() {
      uni.setClipboardData({
        data: 'HB_Mr_Liang',
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          })
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  box-sizing: border-box;
}

.contact-info {
  margin-bottom: 30rpx;
}

.info-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.info-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-icon image {
  width: 50rpx;
  height: 50rpx;
}

.info-content {
  flex: 1;
}

.info-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.info-value {
  font-size: 30rpx;
  font-weight: bold;
}

.contact-form {
  background-color: #f9f9f9;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.form-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  background-color: white;
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}

.form-textarea {
  width: 100%;
  height: 200rpx;
  background-color: white;
  border-radius: 10rpx;
  padding: 20rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  resize: none;
}

.submit-button {
  width: 100%;
  height: 80rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 10rpx;
  font-size: 32rpx;
  border: none;
}

.qr-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40rpx;
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}

.qr-code image {
  width: 1010%;
  height: 300rpx;
  margin-bottom: 10rpx;
}

.qr-text {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  flex: 1;
  margin-left: 20rpx;
  text-align: left;
}
</style>